<template>
	<div class="waiting-point-map">
		<div id="container"></div>
		<div class="address">
			<p class="">{{ neighborhood }}</p>
			<p>{{ formattedAddress }}</p>
		</div>
		<tab-group :dataset="navButtonGroup" index="1"></tab-group>
	</div>
</template>

<script>
	import TabGroup from "../../components/currency/tab/tab.vue";

	export default {
		name: "waiting-point-map",
		components: {
			TabGroup
		},
		data() {
			return {
				navButtonGroup: [
					{
						name: "订单", route: { path: '/temporaryDirector/index' }
					},
					{
						name: "待取点", route: { path: '/temporaryDirector/waiting-point-map' }
					},
					{
						name: "查询报价", route: { path: '/temporaryDirector/enquiry-quotation' }
					},
					{
						name: "个人中心", route: { path: '/temporaryDirector/temporary-center' }
					}
				],
				neighborhood: '暂无名称',
                formattedAddress: '暂无详细地址，请点击门店显示',
                map: null, geocoder: null
			}
		},
		mounted() {
            this.initializationLoadAmapSourceOperate().then(
                this.reqeustShopWaitingPointData
            ).then(
                this.settingWaitingPointOperate
            ).catch(
                (frs) => {
                    console.log(frs);
                }
            );
		},
		methods: {
            initializationLoadAmapSourceOperate() {
                return new Promise((resolve, reject) => {
                    this.$util.loadSourceUrl({
                        mode: 'script',
                        url: 'https://webapi.amap.com/maps?v=1.4.15&key=a9cee9141c7a483fe481b6d78f554f47&plugin=AMap.Geocoder',
                        name: 'gaode-map',
                        resolve: resolve,
                        reject: reject
                    });
                });
            },
            reqeustShopWaitingPointData() {
                return new Promise((resolve, reject) => {
                    var url = '/api/home/order/ordermap',
                        params = {
                            token: this.$store.state.options.user.token
                        };

                    this.$util.postRequestInterface(url, params, {
                        success: (res) => {
                            // console.log(res);
                            resolve(res);
                        },
                        fail: reject
                    });
                });
            },
            settingWaitingPointOperate(res) {
                if(!this.map) {
                    this.map = new AMap.Map('container', {
                        resizeEnable: true, zoom: 15
                    });
                }

                if(res.data == '') {
                    this.$toast(res.msg);
                    return;
                }

                var provinces = res.data,
                    {longitude, latitude} = provinces[0];

                // console.log(longitude, latitude);

                for (let x of provinces) {
                    if(!x.longitude || !x.latitude) continue;

                    let titleHtml = `<p class="map-sign-title">${x.username}</p>`,
                        weightHtml = `<p class="map-sign-number">重量：${x.zweight}</p>`,
                        numberHtml = `<p class="map-sign-number">数量：${x.znumber}</p>`,
                        htmlContent = Number(x.znumber) > 0 ? numberHtml : weightHtml,
                        text = new AMap.Text({
                            text: titleHtml + htmlContent,
                            anchor: 'center', // 设置文本标记锚点
                            draggable: false,
                            cursor: 'pointer',
                            angle: 0,
                            style: {
                                'padding': '1rem',
                                'margin-bottom': '1rem',
                                'border-radius': '.25rem',
                                'background-color': 'white',
                                // 'width': '15rem',
                                'border-width': 0,
                                'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                                'text-align': 'center',
                                'font-size': '1.3rem',
                                'color': '#333333'
                            },
                            position: [x.longitude, x.latitude]
                        });
                    
                    text.on('click', this.controllerSetAddresDetails);
                    text.setMap(this.map);
                }

                // this.map.setCenter(new AMap.LngLat(longitude, latitude));
                this.map.setCenter([longitude, latitude]);
            },
            requestGetUserLocationData(res) {
                return new Promise((resolve, reject) => {
                    if(!this.geocoder) {
                        this.geocoder = new AMap.Geocoder({
                            radius: 100,
                            extensions: "all"
                        });
                    }
                    // console.log(this.geocoder);
                    // console.log(res.longitude, res.latitude);

                    // 将当前定位的坐标转换为地址信息
                    this.geocoder.getAddress([res.longitude, res.latitude], (status, result) => {
                        // console.log('status', status);
                        // console.log('result', result);

                        if (status == 'complete' && result.info == 'OK') {
                            if (result.regeocode) {
                                // result.regeocode.formattedAddress
                                resolve(result);
                            } else {
                                reject();
                            }
                        } else {
                            reject();
                        }
                    });
                });
            },
            controllerSetAddresDetails(res) {
                // console.log(res);

                var { lat, lng } = res.lnglat;

                this.requestGetUserLocationData({longitude: lng, latitude: lat}).then(
                    (res) => {
                        // console.log(res);
                        this.neighborhood = res.regeocode.addressComponent.building || res.regeocode.addressComponent.neighborhood;
                        this.formattedAddress = res.regeocode.formattedAddress;
                    }
                ).catch(
                    (frs) => {
                        this.$toast('获取位置信息失败');
                    }
                );
            }
		}
	}
</script>

<style lang="scss">
	html,
	body {
		height: 100%;

		.waiting-point-map {
			height: 80%;
			/*margin-bottom: 4rem;*/
			#container {
				height: 100%;
			}

			.address {
				margin: 1rem;

				& p:first-child {
					color: #333333;
					font-size: 1.4rem;
				}

				& p:last-child {
					color: #999999;
					font-size: 1rem;
				}
			}
		}

		.map-sign-title {
            text-align: left;
        }

        .map-sign-number {
			color: #999999;
		}
	}
</style>
